<template>
  <div class="platform">
    <div class="mb-10">
      <el-button type="success" @click="add()">新增</el-button>
    </div>

    <div>
      <el-table
        :data="bannerList"
        border
        style="width: 100%"
        height="100%"
        highlight-current-row
      >
        <el-table-column type="index" label="序号" width="70" />
        <el-table-column label="轮播名称" width="300" prop="slider_position" />
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <div class="flex justify-center items-center">
              <el-button type="primary" size="small" @click="edit(row)"
                >编辑</el-button
              >
              <el-button type="danger" size="small" @click="del(row)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog v-model="isShow" title="轮播设置" width="50%">
      <el-tabs type="border-card" v-model="activeTab">
        <el-tab-pane label="基本信息" :name="0">
          <div class="flex justify-center items-center">
            <span class="mr-2">轮播名称:</span>
            <el-input v-model="row.slider_position" style="width: 240px" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="轮播图片" :name="1" v-if="type">
          <div class="mb-2">
            <el-upload
              :show-file-list="false"
              :action="setting.uploadUrl"
              :on-success="updateFile"
              :data="{ directory: '/' }"
              accept="image/*"
            >
              <el-button type="success">添加图片</el-button>
            </el-upload>
          </div>
          <el-table
            :data="bannerDetail"
            border
            style="width: 100%"
            height="100%"
            highlight-current-row
          >
            <el-table-column label="图片">
              <template #default="{ row }">
                <el-image
                  style="width: 100%; height: 100px"
                  :src="row.image_url"
                  fit="scale-down"
                />
              </template>
            </el-table-column>
            <el-table-column label="状态">
              <template #default="{ row }">
                <div class="flex justify-center items-center">
                  <el-switch
                    :active-value="0"
                    :inactive-value="1"
                    v-model="row.status"
                    @change="cUpdate(row)"
                    style="
                      --el-switch-on-color: #13ce66;
                      --el-switch-off-color: #ff4949;
                    "
                  />
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="{ row }">
                <div class="flex justify-center items-center">
                  <el-button
                    type="danger"
                    size="small"
                    @click="cUpdate({ ...row, del: 1 })"
                    >删除</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="isShow = false">取消</el-button>
          <el-button type="primary" @click="confirm()"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import banner from "@/api/banner.js";
import { ref, onMounted } from "vue";
import setting from "@/settings.js";
const bannerList = ref([]);
const isShow = ref(false);
const type = ref(false);
const row = ref({});
const slider_id = ref(null);
const activeTab = ref(0);
const bannerDetail = ref([]);
const loadBannerData = async () => {
  const res = await banner.bannerData();
  bannerList.value = res.banneralls;
};
const add = () => {
  type.value = false;
  isShow.value = true;
  row.value = {};
};

const loadDetails = async () => {
  const res = await banner.details({ slider_id: slider_id.value });
  bannerDetail.value = res;
};
const edit = async (e) => {
  slider_id.value = e.slider_id;
  await loadDetails();
  type.value = true;
  isShow.value = true;
  row.value = { ...e };
};

const update = async (val) => {
  await banner.update(val);
};
const del = async (e) => {
  row.value = { ...e, del: 1 };
  await update(row.value);
  await loadBannerData();
  ElMessage({
    type: "success",
    message: "成功",
  });
};
const updateFile = async (res, file, files) => {
  if (res.code == 200) {
    await banner.add({
      slider_id: slider_id.value,
      image_url: res.data.urlFull,
    });
    loadDetails();
  }
};
const cUpdate = async (val) => {
  await banner.cUpdate(val);
  loadDetails();
  ElMessage({
    type: "success",
    message: "成功",
  });
};
const confirm = async () => {
  if (!row.value.slider_position != null && !row.value.slider_position != "") {
    ElMessage({
      type: "error",
      message: "名称不能为空",
    });
    return;
  }
  if (type.value) {
    if (activeTab) {
      await update(row.value);
      loadBannerData();
    }
  } else {
    await banner.create(row.value);
    loadBannerData();
  }
  isShow.value = false;
  ElMessage({
    type: "success",
    message: "成功",
  });
};
onMounted(() => {
  loadBannerData();
});
</script>
<style>
.el-tabs--border-card > .el-tabs__content {
  height: 500px;
  overflow: auto;
}
::-webkit-scrollbar {
  width: 4px;
  height: 6px;
}
::-webkit-scrollt-corner {
  display: block;
}
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track {
  border-right-color: transparent;
  border-left-color: transparent;
  background: rgba(0, 0, 0, 0.1);
}
</style>
